<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="author" content="yeching yeching.info" />
<style type="text/css">
    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
    .g-head{width:300px;height:300px;background:gray;
    display: flex;
    flex-wrap: wrap;

    }
    .column{
		flex-basis: 100%;
 		 display:flex;
    }
    .column:nth-child(2){
  		justify-content: center;
	}
	.column:nth-child(3){
 	 	justify-content: space-between;
	}
    .g-head span{box-sizing:border-box;border:1px solid white;display:block;width:100px;height:100px;background:red;
    color:white;font-size:25px;text-align:center;line-height:100px;
    }
</style>
 </head>
 
<body>
<!-- 文档 -->
<div class="g-doc">
	<!-- 头部 -->	
	<header id="g-head" class="g-head">
	<div class="column">
	<span>1</span>
	<span>2</span>
	<span>3</span>
	</div>
	<div class="column">

		<span>4</span>
	</div>
	<div class="column">
		<span>5</span>
		<span>6</span>
	</div>
	</header>
	<!-- /头部 -->
	<!-- 主体 -->
	<div id="g-body" class="g-body">
		
	</div>
	<!-- /主体 -->
	<!-- 尾部 -->
	<footer id="g-foot" class="g-foot">
		
	</footer>
	<!-- /尾部 -->
</div>
<script type="text/javascript" src=""></script>
</body>
</html>
